/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useCallback } from "react";
import { Form, Button, Input } from "antd";
import { isArray } from "lodash";
import { connect, useHistory } from "dva";
import PageHeaderLayout from "@/layouts/PageHeaderLayout";
import KbBrands from "@/components/Select/Brands";

import brands from "@kb/brands";
import styles from "./index.less";
// 品牌对应map
export const brandsMap = (brandss => {
  const data = {};
  // eslint-disable-next-line array-callback-return
  brandss.map(item => {
    data[item.code] = item;
  });
  return data;
})(brands);
const FormItem = Form.Item;
const FormList = props => {
  const {
    checking,
    dispatch,
    form: { getFieldDecorator, validateFieldsAndScroll },
  } = props;
  const history = useHistory();
  const nameMax = 20;
  const handleFinish = useCallback(
    () => {
      if (dispatch) {
        validateFieldsAndScroll((error, values) => {
          if (!error) {
            const { brands: brandss, name } = values;
            dispatch({
              type: "order_finance/checkQuotationName",
              payload: {
                name,
              },
            }).then(canUse => {
              if (canUse) {
                dispatch({
                  type: "order_finance/save",
                  payload: {
                    qouteTemp: {
                      name,
                      brand: isArray(brandss) ? brandss.join(",") : brandss,
                    },
                  },
                });
                history.replace(`/order/finance/finance_edit`);
              }
            });
          }
        });
      }
    },
    [validateFieldsAndScroll, dispatch, history]
  );

  const formItemLayout = {
    labelCol: {
      xs: { span: 12 },
      sm: { span: 6 },
    },
    wrapperCol: {
      xs: { span: 36 },
      sm: { span: 18 },
    },
  };

  return (
    <PageHeaderLayout title="新建报价单">
      <div className={styles.main}>
        <div className={styles.formwrapper} onSubmit={handleFinish}>
          <Form {...formItemLayout}>
            <FormItem colon={false} label="报价单名称">
              {getFieldDecorator("name", {
                rules: [
                  {
                    required: true,
                    message: "请给报价单起个名字",
                  },
                  {
                    max: nameMax,
                    message: `最多${nameMax}个字`,
                  },
                ],
              })(<Input placeholder="请给报价单起个名字" autoComplete="off" maxLength={nameMax} />)}
            </FormItem>
            <FormItem colon={false} label="快递品牌">
              {getFieldDecorator("brands", {
                rules: [
                  {
                    required: true,
                    message: "请选择快递品牌",
                  },
                ],
              })(
                <KbBrands
                  style={{ width: "100%" }}
                  mode="multiple"
                  requestType="source/getKopBrand"
                />
              )}
            </FormItem>
            <FormItem colon={false} label=" ">
              <Button type="primary" htmlType="submit" className="kb-btn-long" loading={checking}>
                下一步
              </Button>
            </FormItem>
          </Form>
        </div>
      </div>
    </PageHeaderLayout>
  );
};

FormList.defaultProps = {};

export default connect(({ loading }) => ({
  checking: loading.effects["order_finance/checkQuotationName"],
}))(Form.create({ name: "addquote" })(FormList));
